<template>
  <div class="collapse-set">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item title="内容分页" name="1">
        <div class="no-page" v-if="!isPage">
          <i class="el-icon-info"></i>  如果内容结果分页显示
          <el-button type="text" size="mini" @click="setPagination">设置分页</el-button>
          <div>
            <small-tip v-slot:content>
              记得设置内容标签的数据来源:<br />
              在默认页和内容分页源码中
            </small-tip>
          </div>
        </div>
        <div class="use-page" v-if="isPage">
          <div class="page-filter">
            <span class="filter-text">列出模式:</span>
            <el-radio-group v-model="listMode" size="mini">
              <el-radio-button :label="0">首页全部列出</el-radio-button>
              <el-radio-button :label="1">上下页模式</el-radio-button>
            </el-radio-group>
          </div>
          <el-row class="page-input">
            <el-col :span="2">
              <el-button type="text" size="mini">(*)</el-button>
            </el-col>
            <el-col :span="9">
              <el-input type="textarea" resize="none"></el-input>
            </el-col>
            <el-col :span="1">-</el-col>
            <el-col :span="9">
              <el-input type="textarea" resize="none"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button type="text" size="mini">(*)</el-button>
            </el-col>
          </el-row>
          <div class="page-filter">
            <span class="filter-text">链接提取:</span>
            <el-radio-group v-model="extractMode" size="mini">
              <el-radio-button :label="0">自动识别</el-radio-button>
              <el-radio-button :label="1">手动设置规则</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="循环设置" name="2">
        <div class="loop-setting">
          <el-radio-group class="loop-radio" v-model="loopRadio">
            <el-radio :label="0">添加为新记录</el-radio>
            <el-radio :label="1">用分割符连接在上条记录后</el-radio>
          </el-radio-group>
          <div class="wrap-btn">
            <el-button type="text" size="mini">[换行]</el-button>
          </div>
          <div class="loop-filter">
            <span>分割符:</span>
            <el-input class="loop-input" type="text" size="mini"></el-input>
          </div>
          <div class="loop-check">
            <el-checkbox label="循环不足的记录以第一条补全"></el-checkbox>
          </div>
          <div class="loop-filter">
            <span>循环最大次数:</span>
            <el-input-number class="loop-num-input" size="mini" :controls="false"></el-input-number>
            <small-tip v-slot:content>0为无限制</small-tip>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="关联多页" name="3">
        <select-list :height="170" title="多页列表">
          <template v-slot:toolItem>
            <div class="tool-item" @click="newMutiDialog = true"><icon-tip content="添加" eleIcon="el-icon-plus"></icon-tip></div>
            <div class="tool-item"><icon-tip content="编辑" eleIcon="el-icon-edit"></icon-tip></div>
            <div class="tool-item"><icon-tip content="删除" eleIcon="el-icon-close"></icon-tip></div>
          </template>
        </select-list>
        <div>
          <a href="http://faq.locoy.com/q-703.html" target="_blank">什么是多页</a>
        </div>
      </el-collapse-item>
      <el-collapse-item title="其他设置" name="4">
        <div class="other-setting">
          <div class="num-set">
            <span>最大内容分页数量: </span>
            <el-input-number class="num-input" :controls="false" size="mini"></el-input-number>
          </div>
          <div class="num-set">
            <span>每次最大采集数量: </span>
            <el-input-number class="num-input" :controls="false" size="mini"></el-input-number>
          </div>
          <div class="num-tip"><small-tip v-slot:content>0为不限</small-tip></div>
          <div class="other-check">
            <el-checkbox label="提取数据时忽略大小写"></el-checkbox>
          </div>
          <div class="other-set-bottom">
            分页链接代码:
            <el-input size="mini"></el-input>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-dialog
      class="multi-dialog"
      title="新增关联多页"
      :visible.sync="newMutiDialog"
      width="700px">
      <el-tabs v-model="activeMuti" type="border-card">
        <el-tab-pane label="多页设置" name="first">
          <!-- <div class="multi-title">多页地址获取</div> -->
          <el-form label-width="80px">
            <el-form-item label="方式:">
              <el-select size="mini">
                <el-option label="从默认页面" :value="0"></el-option>
              </el-select>
              <el-radio-group class="multi-radio" size="mini">
                <el-radio-button :label="0">页面地址替换</el-radio-button>
                <el-radio-button :label="1">源码中截取</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="将:">
              <el-input size="mini"></el-input>
            </el-form-item>
            <el-form-item label="替换为:">
              <el-input size="mini"></el-input>
            </el-form-item>
            <el-form-item>
              <small-tip v-slot:content>
                支持正则表达式替换, 具体使用文档参考: <a href="https://docs.microsoft.com/zh-cn/dotnet/standard/base-types/regular-expression-language-quick-reference" target="_blank">正则表达式替换</a>
              </small-tip>
            </el-form-item>
          </el-form>
          <div class="to-more-setting">
            <i class="el-icon-info"></i> 多页的内容需要限制区域? 多页上有分页? 使用<el-button type="text" size="mini" @click="multiMore = !multiMore">更多设置</el-button>
          </div>
          <el-tabs v-if="multiMore" v-model="activeMutiMore" type="card">
            <el-tab-pane label="分页设置" name="first" style="height: 278px;">
              <div class="multi-filter">
                <span class="filter-text">列出模式:</span>
                <el-radio-group v-model="multiListMode" size="mini">
                  <el-radio-button :label="0">首页全部列出</el-radio-button>
                  <el-radio-button :label="1">上下页模式</el-radio-button>
                </el-radio-group>
              </div>
              <span class="extract-title">网址提取区域:</span>
              <div class="site-interval">
                <el-button class="divide" type="text">(*)</el-button>
                <el-input type="textarea" :rows="5" resize="none" ref="intervalStart" placeholder="网址提取区域开始字符串"></el-input>
                <div class="divide">-</div>
                <el-input type="textarea" :rows="5" resize="none" ref="intervalEnd" placeholder="网址提取区域结束字符串"></el-input>
                <el-button class="divide" type="text">(*)</el-button>
              </div>
              <div class="multi-filter">
                <span class="filter-text">链接提取:</span>
                <el-radio-group v-model="multiExtractMode" size="mini">
                  <el-radio-button :label="0">自动识别</el-radio-button>
                  <el-radio-button :label="1">手动设置规则</el-radio-button>
                </el-radio-group>
              </div>
              <div class="page-num">
                <span>最多获取分页数, 0为不限:</span>
                <el-input-number class="num-input" :controls="false" size="mini"></el-input-number>
              </div>
            </el-tab-pane>
            <el-tab-pane label="区域设置" name="second" style="height: 278px;">
              <el-alert
                v-slot:title
                :closable="false"
                type="info">
                <i class="el-icon-info"></i> 该处不设置, 默认将返回多页整个页面的源代码
              </el-alert>
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="area-title">
                    <span>开头字符串:</span>
                    <el-button type="text" size="mini">(*)</el-button>
                  </div>
                  <el-input type="textarea" resize="none" :rows="5"></el-input>
                </el-col>
                <el-col :span="12">
                  <div class="area-title">
                    <span>结尾字符串:</span>
                    <el-button type="text" size="mini">(*)</el-button>
                  </div>
                  <el-input type="textarea" resize="none" :rows="5"></el-input>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="结果测试" name="second">
          <div class="result-test">
            <div class="test-header">
              <span>默认页地址:</span>
              <el-select class="select-site" size="mini">
                <option value="http://www.baidu.com"></option>
              </el-select>
              <el-button size="mini" plain>测试</el-button>
            </div>
            <el-input type="textarea" :rows="7"></el-input>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="multi-footer">
        <div class="left-input">
          <span class="left-label">任务规则名:</span>
          <el-input type="text" size="mini"></el-input>
        </div>
        <div class="right-btn">
          <el-button type="primary" size="mini" icon="el-icon-save">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SmallTip from '@/components/SmallTip.vue'
import IconTip from '@/components/IconTip.vue'
import SelectList from './SelectList.vue'
export default {
  name: 'CollapseSet',
  components: {
    SmallTip,
    SelectList,
    IconTip
  },
  data () {
    return {
      activeName: '4',
      isPage: true,
      listMode: 0,
      extractMode: 0,
      loopRadio: 0,
      newMutiDialog: false,
      activeMuti: 'first',
      activeMutiMore: 'first',
      multiMore: false,
      multiListMode: 0,
      multiExtractMode: 0
    }
  },
  methods: {
    /**
     * 是否开启内容分页设置
     */
    setPagination () {
      this.isPage = true
    },
    /**
     * 新建多页
     */
    addMutiPage () {

    }
  }
}
</script>
<style lang="scss">
.collapse-set {
  font-size: 12px;
  .el-collapse-item__header {
    height: 30px;
    &.is-active {
      border-bottom-color: #dfdfdf;
    }
  }
  .el-collapse-item__content {
    height: 200px;
    padding-bottom: 0;
  }
  .no-page {
    padding: 20px 0px 20px 20px;
  }
  .page-filter {
    display: flex;
    justify-content: space-between;
    .filter-text {
      font-size: 12px;
    }
    .el-radio-button--mini .el-radio-button__inner {
      padding: 4px 2px;
    }
  }
  .use-page {
    padding-top: 5px;
    .page-input {
      margin: 20px 0;
    }
  }
  .loop-setting {
    .el-radio {
      line-height: 2;
    }
    .el-radio__label,
    .el-checkbox__label {
      font-size: 12px;
    }
    .loop-filter {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      .loop-input {
        width: 150px;
      }
      .loop-num-input {
        width: 50px;
      }
    }
    .wrap-btn {
      text-align: right;
    }
    .loop-check {
      padding: 10px 0;
    }
  }
  .multi-dialog {
    .multi-radio {
      margin-left: 20px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .to-more-setting {
      text-align: right;
      background-color: #f4f4f5;
      color: #909399;
    }
    .el-tabs--border-card {
      box-shadow: none;
    }
    .el-dialog__body {
      padding: 0 20px;
    }
    .multi-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      // border-top: 1px dashed;
      background: #fff;
      .left-input {
        display: flex;
        .left-label {
          width: 120px;
          line-height: 2;
        }
      }
    }
    .multi-filter {
      display: flex;
      align-items: center;
      .filter-text {
        margin-right: 20px;
      }
    }
    .extract-title {
      line-height: 3;
    }
    .site-interval {
      display: flex;
      align-items: center;
      margin: 0 0 20px;
      .divide {
        padding: 0 10px;
      }
    }
    .area-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
    }
    .page-num {
      margin-top: 15px;
      .num-input {
        margin-left: 20px;
      }
    }
    .result-test {
      .test-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;
        .select-site {
          width: 458px;
          margin: 0 20px;
        }
      }
    }
  }
  .other-setting {
    .num-set {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;
      font-size: 12px;
    }
    .num-input {
      width: 80px;
    }
    .num-tip {
      text-align: right;
      font-size: 12px;
    }
    .el-checkbox__label {
      font-size: 12px;
    }
    .other-set-bottom {
      font-size: 12px;
      margin-top: 20px;
    }
  }
}
</style>
